<template>
	<view class="content">
		<!-- <view class="zhiboTab flex flex-align">
			<view class="flex-1" :class="type==1?'active':''" @click="getTab(1)">直播中</view>
			<view class="flex-1" :class="type==2?'active':''" @click="getTab(2)">待开播</view>
			<view class="flex-1" :class="type==3?'active':''" @click="getTab(3)">已结束</view>
		</view>
		<view class="" style="height: 100rpx;"></view> -->
		<view class="zhiboList flex-line flex">
			<view class="list" v-for="(item,index) in dataList" :key="index" v-if="dataList.length!=0" @click="goUrl(item)">
				<view class="left">
					<image :src="item.cover||'/static/logo.jpg'" mode=""></image>
				</view>
				<view class="right" style="padding:10rpx 0;">
					<view class="title flex flex-align flex-center text_one">{{item.course_name||item.name}}</view>
				</view>
			</view>
			<view class="empty-box" v-if="dataList.length==0">
				<image src="/static/ic_nodata.png" mode=""></image>
				<view class="">暂无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef MP
	// #endif
	export default {
		data() {
			return {
				page:1,
				dataList:[],
				type:1,
				dataInfo:''
			}
		},
		
		onLoad() {
			this.getData()
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.getList()
		},
		methods: {
			getList(){
				let that = this
				that.tui.request('api.auth.room/roomList', "POST", {page:that.page,status:that.type}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataList = that.dataList.concat(res.data.list)
					}
				}).catch((res) => {
					
				})
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataInfo = res.data
					}
				}).catch((res) => {
					
				})
			},
			getTab(e){
				this.type = e
				this.page = 1
				this.dataList = []
				this.getList()
			},
			goUrl(e){
				let that = this
				console.log(e)
				uni.setStorageSync('zhiboStatus',e)
				// #ifdef H5
				// window.location.href = e.url
				that.tui.href('/pages/zhibo/zhibo?zhiboid='+e.id+"&inviter_code="+uni.getStorageSync('inviter_code'))
				// #endif
				// #ifdef MP
				that.tui.href('/pages/zhibo/zhibo?url='+encodeURIComponent(JSON.stringify(e.url))+"&image="+e.cover+"&id="+e.id+'&course_name='+e.course_name)
				// #endif
			}
		}
	}
</script>
 
 
<style lang="scss" scoped>
	.zhiboTab{position: fixed;top: 80rpx;left: 0;width: 100%;height: 100rpx;background: #fff;box-sizing: border-box;padding: 0 20rpx;z-index: 111;border-top: 1px solid #eee;
	    /* #ifdef MP */
	    top: 0;
	    /* #endif */
		.flex-1{text-align: center;padding: 20rpx 0;}
		.active{background: $base;color: #fff;}
	}
	.zhiboList{
		padding: 20rpx 30rpx;box-sizing: border-box;
		.list{border-radius: 10rpx;margin-bottom: 20rpx;width: 49%;margin-right: 2%;
			.left{
				image{width: 100%;height: 350rpx;}
			}
			.right{padding: 20rpx 0 20rpx 20rpx;
				.title{font-weight: bold;}
				.zhubo{margin: 20rpx 0;
					image{width: 80rpx;height: 80rpx;border-radius: 100%;margin-right: 10rpx;}
				}
				.shop{
					.imgs{position: relative;margin-right: 20rpx;
						image{width: 120rpx;height: 120rpx;border-radius: 10rpx;}
						.price,.number{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .25);color: #fff;text-align: center;border-radius: 10rpx;}
						.price{padding-top: 78rpx;}
						.number{padding-top: 30rpx;}
					}
					.imgs:last-child{margin-right: 0;}
				}
			}
		}
		.list:nth-child(2n){margin-right: 0;}
	}
</style>
